<template>
    <div class="blockView">
        <Select type="text" transfer ref="select" v-if="show" v-model="inputValue" @blur.native.capture="onblur">
            <Option v-for="(item,index) in selectList" :value="item.value" :key="item.value + '' +index">{{item.name}}</Option>
        </Select>
        <div class="blockView" v-else @click="onShow">{{showValue}}</div>
    </div>
</template>

<script>
import Bus from '@/libs/bus.js';

export default {
    props: ['value', 'selectList','row'],
    data() {
        return {
            show: false,
            inputValue: this.value,
        }
    },
    computed: {
        showValue: {
            get: function () {
                var _value = null;
                for (let i = 0; i < this.selectList.length; i++) {
                    const element = this.selectList[i];
                    if (element.value === this.inputValue) {
                        _value = element.name
                    }
                };
                return _value;
            }
        }
    },
    watch: {
        value(val) {
            this.inputValue = val;
        },
        inputValue(val) {
            this.$emit('input', val);
            Bus.$emit('input', {
                value:val,
                index:this.row
            });
        }
    },
    methods: {
        onShow() {
            this.show = true;
        },
        onblur() {
            this.$nextTick(() => {
                this.show = false;
            })
        }
    }
}
</script>

<style scoped>
.blockView {
    width: 100%;
    height: 32rem;
}
.blockView .blockView {
    line-height: 32rem;
}
</style>